<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>云支付账号</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  #parse('/headFiles.html')
</head>
<body>
<div class="layui-form" style="padding: 20px 15px 0 0;">
    #if($tradeNo)
    <div class="layui-form-item">
        <label class="layui-form-label">充值订单</label>
        <div class="layui-form-mid layui-word-aux">$!{tradeNo}</div>
    </div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">支付类型</label>
                <div class="layui-form-mid layui-word-aux">$!{payTypeName}</div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">充值金额</label>
                <div class="layui-form-mid layui-word-aux">$!{moneyStr}</div>
            </div>
        </div>
    </div>
    #else
    <div id="form-panel">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-xs8">
                <div class="layui-form-item">
                    <label class="layui-form-label">支付类型</label>
                    <div class="layui-input-block">
                        <select name="payType">
                            #foreach($item in $payTypeList)
                            <option value="$!{item.index()}">$!{item.note()}</option>
                            #end
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-xs8">
                <div class="layui-form-item">
                    <label class="layui-form-label">充值金额</label>
                    <div class="layui-input-block">
                        <input type="text" name="money" lay-verify="required"  autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs4">
                <input type="button" class="layui-btn" id="LAY-form-submit" value="提交">
            </div>
        </div>
    </div>
    #end
    #if($tradeNo)
        #if($errorMsg)
        <div style="margin-top:15px;"><h3 style="text-align: center;color:red;">$!{errorMsg}</h3></div>
        #else
        <div style="margin-top:10px;">
            <img src="$!{webRoot}/business/payAccount/recharge/qrcode.jpg?tradeNo=$!{tradeNo}" style="margin:auto;display:block;"/>
        </div>
        #end
    #else
    <div id="pay-panel" style="display:none;">
        <div class="layui-form-item">
            <label class="layui-form-label">充值订单</label>
            <div class="layui-form-mid layui-word-aux" id="tradeNo">$!{tradeNo}</div>
        </div>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">支付类型</label>
                    <div class="layui-form-mid layui-word-aux" id="payTypeName">$!{payTypeName}</div>
                </div>
            </div>
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">充值金额</label>
                    <div class="layui-form-mid layui-word-aux" id="moneyStr">$!{moneyStr}</div>
                </div>
            </div>
        </div>
        <div style="margin-top:10px;">
            <img style="margin:auto;display:block;"/>
        </div>
    </div>
    #end
</div>
#parse('/footFiles.html')
<script type="text/javascript">
 layui.config({
    base: '$!{webRoot}/layuiadmin/' //静态资源所在路径
    ,webRoot:'$!{webRoot}'
 }).extend({
    index: 'lib/index'
 }).use(['index', 'form'], function(){
    var $ = layui.$,form = layui.form;
    $('#LAY-form-submit').click(function (){
        var money = $('input[name="money"]').val();
        var payType = $('select[name="payType"]').val();
        if(money) {
            $.ajax({
                type: "post",
                url: "$!{webRoot}/business/payAccount/recharge.do",
                data: {money: money,payType:payType},
                dataType: "json",
                success: function (res) {
                    if (res.code == 200) {
                        $('#form-panel').hide();
                        $('#pay-panel').show();
                        $('#tradeNo').html(res.body.tradeNo);
                        $('#payTypeName').html(res.body.payTypeName);
                        $('#moneyStr').html(res.body.moneyStr);
                        $('#pay-panel div img').attr('src','$!{webRoot}/business/payAccount/recharge/qrcode.jpg#'+Math.random());
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }
            });
        }
    });
});
</script>
</body>
</html>